Pour intégrer une bulle de chat sur votre boutique Shopify, il va falloir en modifier le code. Mais pas de panique, rien de plus simple.

Lorsque le client cliquera sur la bulle de chat, il sera redirigé vers un Chatbot Simio

Vous pouvez suivre notre documentation pour 👉 Créer un Chatbot

Cela permet de collecter des optins de de lancer le client sur un flow.

Voici deux codes à intégrer dans votre thème Shopify.

Vous pouvez si vous le souhaitez modifier la tournure des phrases et le style CSS.

Code source à ajouter dans theme.liquid

Vous devez vous rendre dans le custom code de votre thème Shopify et vous rendre dans le fichier theme.liquid

<div id="whatsapp-bubble">
  <div id="whatsapp-icon-closed">
    <img
      src="https://firebasestorage.googleapis.com/v0/b/phocea-75b47.appspot.com/o/whatsapp-chat.png?alt=media&token=d101a297-8cf3-480a-88b6-60cef3f57901"
      alt="WhatsApp Closed"
    />
  </div>
  <div id="whatsapp-icon-open" style="display: none">
    <img
      src="https://firebasestorage.googleapis.com/v0/b/phocea-75b47.appspot.com/o/Compa%2FClose%20popup.svg?alt=media&token=1e36d102-415e-4db3-839c-502c50842c40&_gl=1*1m6q8vc*_ga*MjE1Njc1NTcyLjE2NzgwOTc2Nzc.*_ga_CW55HF8NVT*MTY5ODMxNDk3NC4xMTAuMS4xNjk4MzE0OTc5LjU1LjAuMA.."
      alt="WhatsApp Open"
    />
  </div>
  <div id="whatsapp-modal" style="display: none">
    <div id="modal-header">
      <img
        src="https://firebasestorage.googleapis.com/v0/b/phocea-75b47.appspot.com/o/Compa%2FDigital_Glyph_Green.svg?alt=media&token=0a3ff908-5eee-4459-ba39-8f6acb56e2d4&_gl=1*13co57p*_ga*MjE1Njc1NTcyLjE2NzgwOTc2Nzc.*_ga_CW55HF8NVT*MTY5ODMwODA3MC4xMDkuMS4xNjk4MzA4MTI5LjEuMC4w"
        alt="WhatsApp"
        id="whatsapp-logo"
      />
      <h2 id="modal-title">Je suis sur le site et j'ai quelques questions</h2>
    </div>
    <a
      href="INSERER LE LIEN DU CHATBOT"
      target="_blank"
      class="whatsapp-button"
      >DISCUTER AVEC NOUS</a
    >
    <div id="modal-footer">
      <a href="https://getsimio.com" target="_blank">Powered by <b>Simio</b></a>
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const whatsappBubble = document.getElementById("whatsapp-bubble");
    const whatsappModal = document.getElementById("whatsapp-modal");
    const whatsappIconClosed = document.getElementById("whatsapp-icon-closed");
    const whatsappIconOpen = document.getElementById("whatsapp-icon-open");

    whatsappBubble.addEventListener("click", function () {
      if (whatsappModal.style.display === "flex") {
        whatsappModal.style.display = "none"; // Close the modal if it's open
        whatsappIconClosed.style.display = "block"; // Show the closed icon
        whatsappIconOpen.style.display = "none"; // Hide the open icon
      } else {
        whatsappModal.style.display = "flex"; // Open the modal if it's closed
        whatsappIconClosed.style.display = "none"; // Hide the closed icon
        whatsappIconOpen.style.display = "block"; // Show the open icon
      }
    });

    whatsappModal.addEventListener("click", function (event) {
      if (event.target === whatsappModal) {
        whatsappModal.style.display = "none"; // Close the modal if it's open
        whatsappIconClosed.style.display = "block"; // Show the closed icon
        whatsappIconOpen.style.display = "none"; // Hide the open icon
      }
    });
  });
</script>

Code source à ajouter dans theme.css

Vous devez vous rendre dans le custom code de votre thème Shopify et vous rendre dans le fichier theme.liquid

À insérer tout en bas de votre fichier theme.css de votre thème Shopify.

#whatsapp-bubble {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}

#whatsapp-icon-closed img {
  width: 60px; /* Adjust the size as needed */
  height: auto;
  cursor: pointer;
}
#whatsapp-icon-open img {
  width: 60px; /* Adjust the size as needed */
  height: auto;
  cursor: pointer;
}

#whatsapp-modal {
  position: absolute;
  bottom: 80px; /* Adjust the distance from the bottom as needed */
  right: 0px; /* Adjust the distance from the right as needed */
  width: 300px;
  height: 200px;
  background-color: #fff;
  padding: 10px;
  display: none;
  border-radius: 10px;
  box-shadow: 4px 4px 0px 0px #22184b;
  border: 1px solid #000000;
  flex-direction: column;
  justify-content: space-between; /* Add space between items */
  align-items: flex-start;
}

.whatsapp-button {
  display: block;
  text-align: center;
  background-color: #25d366; /* WhatsApp green color */
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  text-decoration: none;
  margin-top: 10px;
  font-weight: bold;
  width: 100%; /* Take the full width */
}

#modal-footer {
  width: 100%; /* Take the full width */
  text-align: center;
  font-size: 10px;
}

#modal-header {
  display: flex;
  align-items: top;
}

#whatsapp-logo {
  width: 45px; /* Adjust the size as needed */
  height: auto;
}

#modal-title {
  margin-left: 10px; /* Adjust the margin as needed to separate the title from the logo */
}